import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styles from './style.less';
import pic from '@/src/assets/comps/other/noQuery/noQuery.png';
import ReactDOM from 'react-dom';
class NoQueryC extends Component {
  // 默认值
  static defaultProps = {
    title: '请输入查询条件进行查询', // 默认提示信息
    width: '100%',
    height: '',
  };
  constructor(props) {
    super(props);
    this.state = {
      heightOrigin: '', //设置默认高度
    };
  }

  componentDidMount() {
    if (!this.props.height) {
      window.addEventListener('resize', this.windowChange);
      this.windowChange();
    }
  }

  componentWillUnmount() {
    // 删除窗口大小的监听
    window.removeEventListener('resize', this.windowChange);
  }

  // 窗口大小变更触发
  windowChange = () => {
    setTimeout(() => {
      const screenHeigh = document.body.clientHeight;
      try {
        //获取组件当前位置、设置组件高度使其高度撑满
        const domTop = ReactDOM.findDOMNode(this).getBoundingClientRect();
        this.setState({
          heightOrigin: screenHeigh - domTop.top - 70 + 'px',
        });
      } catch (err) {
        this.setState({
          heightOrigin: '300px',
        });
      }
    }, 0);
  };

  render() {
    const { title, width, height } = this.props;

    return (
      <div className={styles.noQuery} style={{ width: width, height: height ? height : this.state.heightOrigin }}>
        <img src={pic} width={186} height={128} />
        <div style={{ marginTop: '2px' }}>{title}</div>
      </div>
    );
  }
}
// props默认值
NoQueryC.propsTypes = {
  title: PropTypes.string, // 提示信息
  width: PropTypes.string, // 宽度
  hight: PropTypes.string, // 高度
};

export default NoQueryC;
